<template>
  <el-modal>
    <el-form :model="formData" ref="form" label-width="80px" :inline="false">
      <el-form-item label="基本单位">
        <el-input v-model="formData.basicUnit" placeholder="请输入基本单位(小单位)"></el-input>
      </el-form-item>

      <el-form-item label="副单位">
        <div style="display: flex; align-items: center;">
          <el-input v-model="formData.otherUnit" placeholder="请输入副单位(大单位)" style="width: 48%;"></el-input>
          <span style="margin: 0 8px;">=</span>
          <el-input v-model="formData.ratio" placeholder="请输入比例" class="dw"></el-input>
          <span class="dw1">
            基本单位
          </span>
        </div>
      </el-form-item>

      <el-form-item label="副单位2">
        <div style="display: flex; align-items: center;">
          <el-input v-model="formData.otherUnitTwo" placeholder="请输入副单位2(大单位)" style="width: 48%;"></el-input>
          <span style="margin: 0 8px;">=</span>
          <el-input v-model="formData.ratioTwo" placeholder="请输入比例2" class="dw"></el-input>
          <span class="dw1">基本单位</span>
        </div>
      </el-form-item>

      <el-form-item label="副单位3">
        <div style="display: flex; align-items: center;">
          <el-input v-model="formData.otherUnitThree" placeholder="请输入副单位3(大单位)" style="width: 48%;"></el-input>
          <span style="margin: 0 8px;">=</span>
          <el-input v-model="formData.ratioThree" placeholder="请输入比例3" class="dw"></el-input>
          <span class="dw1">基本单位</span>
        </div>
      </el-form-item>

    </el-form>

    <div slot="footer" style="display: flex; justify-content: flex-end; margin-top: 10px; ">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-modal>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import reqeust from '@/api/request'
// import router from '@/router'
let emits = defineEmits(['close'])
let formData = ref({})
let close = () => {
  emits('close')
}

let onSubmit = () => {
  reqeust.post("/commodity/unit/insert", formData.value, {
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData.value)
  }).then(resp => {
    console.log(resp)
    if (resp.code == 200) {
      emits('close')
    }
  })
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 16px;
}

.dw {
  width: 48%;
  position: relative;
}

.dw1 {
  position: absolute;
  right: 40%;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.65);
}
</style>
